<template>
  <div id="home">
    <van-search
      shape="round"
      v-model="search"
      placeholder="请输入搜索关键词"
      @click="onSearch"
    />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <img src="../assets/img/banner1.jpg" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="../assets/img/banner2.jpg" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="../assets/img/banner3.jpg" alt="" />
      </van-swipe-item>
    </van-swipe>

    <van-tabs v-model="active" color="pink" :sticky="true">
      <van-tab v-for="type in articleall" :key="type.id" :title="type.name">
        <van-grid :column-num="2" :border="false">
          <router-link
            tag="div"
            :to="'/detail/' + item.id"
            v-for="item in type.content"
            :key="item.id"
          >
            <div class="content">
              <img :src="uploads + item.img" alt="" style="width: 150px" />
              <p class="title" style="font-weight: bold">{{ item.title }}</p>
              <img
                :src="uploads + item.user_img"
                alt=""
                style="
                  width: 30px;
                  height: 30px;
                  margin-right: 90px;
                  border-radius: 15px;
                "
              />
              <p class="p">
                {{ item.username }}
              </p>
            </div>
          </router-link>
        </van-grid>
      </van-tab>
    </van-tabs>
    <bottom :active="0"></bottom>
  </div>
</template>

<script>
import { mapState } from "vuex";
import axios from "axios";
import bottom from "@/components/bottom.vue";

export default {
  components: { bottom },
  data() {
    return {
      active: 0,
      // newslist: [],
      articleall: [],
      value: "",
      search: "",
      uploads: this.$store.state.uploads,
    };
  },
  created() {
    axios
      .get("/api/demo/web2/public/index.php/admin/article/articleall.html")
      .then((response) => {
        console.log(response.data.data);
        this.articleall = response.data.data;
        // console.log(item);
      });
    console.log("created");
  },
  methods: {
    onSearch() {
      this.$router.push({
        path: "/search",
      });
    },
  },
  onChange(e) {
    this.setData({
      value: e.detail,
    });
  },
  onChange(event) {
    wx.showToast({
      title: `切换到标签 ${event.detail.name}`,
      icon: "none",
    });
  },
};
</script>
<style lang="scss" scoped>
>>> .van-nav-bar__title {
  font-size: 20px;
}
.my-swipe img {
  width: 100%;
  height: 250px;
  border-radius: 15px;
}

>>> .van-grid-item__content {
  padding: 8px;
}
.naver img {
  width: 55px;
}
.gap {
  height: 5px;
  background: lightgray;
}
>>> .van-tab__text {
  color: lightpink;
  font-size: 20px;
}
>>> .van-tabs__line {
  height: 2px;
}
>>> .van-row {
  border-bottom: 1px solid lightgray;
}
.list .van-image {
  padding-top: 5px;
}
>>> .list .van-tabs__content {
  margin-bottom: 50px;
}
>>> .van-tabs__content {
  margin-bottom: 50px;
}
>>> .van-grid {
  display: flex;
  margin: 10px;
}
>>> .van-grid.van-hairline--top {
  display: flex;
  margin: 10px;
}
.content {
  margin-left: 20px;
  margin-bottom: 60px;
}
.p {
  text-align: revert;
  margin-top: -30px;
}
>>> .van-search__content {
  border-radius: 20px;
}
.van-search__content {
  border: 1px solid lightpink;
}
.title{
  max-width: 150px;
  word-break:normal;
  white-space:pre-wrap;
  word-wrap: break-word;
}
</style>
